<template>
    <div class="toolbar-wrap">
        <div class="toolbar-redo">
            <!--撤销              -->
            <i class="iconfont icon-chexiao"></i>
            <!-- 重做 -->
            <i class="iconfont icon-zhongzuo"></i>
            <!--        批注 -->
            <i class="iconfont icon-duanxin_o"></i>
            <!--        选择 -->
            <i class="iconfont icon-xuanze1"></i>
            <!--    查找 -->
            <i class="iconfont icon-chazhao1"></i>
        </div>
        <div class="toolbar-edit">
            <!-- 添加文字 -->
            <el-tooltip effect="dark" content="添加文字" placement="bottom">
                <i class="iconfont icon-wenzi" @click="addTextElement"></i>
            </el-tooltip>

            <!-- 插入图片 -->
            <i class="iconfont icon-tupian"></i>
            <!-- 插入形状 -->
            <i class="iconfont icon-xingzhuang"></i>
            <!-- 插入线条 -->
            <i class="iconfont icon-zhexian"></i>
            <!-- 插入图表 -->
            <i class="iconfont icon-tubiao-bingtu"></i>
            <!-- 插入表格 -->
            <i class="iconfont icon-biaoge"></i>
            <!-- 插入公式 -->
            <i class="iconfont icon-sum"></i>
            <!-- 插入音视频 -->
            <i class="iconfont icon-shipin"></i>

        </div>
        <div class="toolbar-right">
            <i class="iconfont icon-jia pointer" @click="viewSize++"></i>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <span>{{ viewSize + '%' }}</span>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>导出pptist文件</el-dropdown-item>
                        <el-dropdown-item>导出pptx文件</el-dropdown-item>
                        <el-dropdown-item>导出文件</el-dropdown-item>
                        <el-dropdown-item disabled>重置幻灯片</el-dropdown-item>
                        <el-dropdown-item divided>意见反馈</el-dropdown-item>
                        <el-dropdown-item divided>常见问题</el-dropdown-item>
                        <el-dropdown-item divided>快捷键</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <i class="iconfont icon-jian pointer" @click="viewSize--"></i>
            <i class="iconfont icon-quanping_o pointer"></i>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
let viewSize = ref(50);
// 引入store
import { UseMainStore } from '@/stores/index';
let MainStore = UseMainStore();
function addTextElement() {
    MainStore.setIsOperating(true);
    MainStore.setCreatingElement({ type: 'text' })
}
</script>
<style lang="scss" scoped>
.toolbar-wrap {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;

    // icon
    .iconfont {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-right: 1px solid #eee;
        cursor: pointer;

        &:hover {
            background-color: #eee
        }
    }

    .toolbar-redo,
    .toolbar-edit,
    .toolbar-right {
        display: flex;
        align-items: center;
    }

}
</style>